<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>从零开始搭建个人网站——小白篇 - Zexun Luo | 罗泽勋</title>
    <meta property="og:title" content="从零开始搭建个人网站——小白篇 - Zexun Luo | 罗泽勋">
    
    <meta name="twitter:card" content="summary">

    
      
    

    
      
      <meta property="description" content="小白篇和前面正经篇的区别是，懒人篇专门针对基础更浅（或者更懒的）朋友而设计，在这里不会新建一个网站，而是下载我预先准备好的示例网站，在这个示例上面做扩展。这样也是为了避免新手成功创建网站时，面对空荡荡的网站不知所措的尴尬。
[&amp;hellip;] 1.注册 Github 帐号。前往 github.com 注册一个 Github 帐号。（友情提示：认真考虑注册时的用户名，它将是你网站网址的一部分）
补 &amp;hellip;">
      <meta property="og:description" content="小白篇和前面正经篇的区别是，懒人篇专门针对基础更浅（或者更懒的）朋友而设计，在这里不会新建一个网站，而是下载我预先准备好的示例网站，在这个示例上面做扩展。这样也是为了避免新手成功创建网站时，面对空荡荡的网站不知所措的尴尬。
[&amp;hellip;] 1.注册 Github 帐号。前往 github.com 注册一个 Github 帐号。（友情提示：认真考虑注册时的用户名，它将是你网站网址的一部分）
补 &amp;hellip;">
      
    

    
    
    
    <meta name="twitter:image" content="/images/logo.png">
    
    

    

    
    


<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css' rel='stylesheet' type='text/css' />



    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/fonts.css" />
    
<link rel="stylesheet" href="/css/custom.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">  

  </head>

  
  <body class="post">
    <div id="pjax-content">
    <header class="masthead">
      

<h1><a href="/"><img src="/images/logo.png" alt="Zexun Luo" /></a></h1>



      <nav class="menu">
  <ul>
  
  
  <li><a href="/">主页</a></li>
  
  <li><a href="/about/">关于</a></li>
  
  <li><a href="/blog/">日志</a></li>
  
  <li><a href="/post/">技术</a></li>
  
  

  </ul>
</nav>

    </header>
    <article class="main">
      <header class="title">
      
<h1>从零开始搭建个人网站——小白篇</h1>


<h3>罗泽勋 / 
2021-06-01</h3>

<hr>


      </header>



<h3 id="前言">前言</h3>
<p>小白篇和前面<a href="../2021-2-18-2/">正经篇</a>的区别是，懒人篇专门针对基础更浅（或者更懒的）朋友而设计，在这里不会新建一个网站，而是下载我预先准备好的<a href="https://gitee.com/lzxqaq/demosite.git">示例网站</a>，在这个示例上面做扩展。这样也是为了避免新手成功创建网站时，面对空荡荡的网站不知所措的尴尬。</p>
<h3 id="准备工作与前篇一致">准备工作（与前篇一致）</h3>
<p>1.注册 Github 帐号。前往 <a href="https://github.com/" target="_blank">github.com</a> 注册一个 Github 帐号。（友情提示：认真考虑注册时的用户名，它将是你网站网址的一部分）</p>
<p>补充：Github 是一个代码托管平台（远程仓库），你可以将网站的源代码放在上面，Github Pages 是一个免费的静态网站服务，你将网站的源文件放在上面，它会提供一个链接，使互联网上的人都能访问你的网站。</p>
<p>2.准备Git。</p>
<p>（1）下载安装。前往 <a href="https://git-scm.com/download/win" target="_blank">这里</a> ，点击下载 Git-**-64-bit.exe。然后安装，不懂的话一直 next 。</p>
<p>（2）配置。在 win10 搜索 cmd ，打开命令提示符，输入 <code>git config --global user.email &quot;你注册Github所用的邮箱&quot;</code> 回车执行，再输入 <code>git config --global user.name &quot;你的昵称&quot;</code> 回车执行。</p>
<p>3.安装 Hugo。（官方教程可看<a href="https://www.gohugo.org/doc/tutorials/installing-on-windows/" target="_blank">这里</a>)</p>
<p>（1）首先在 D 盘创建一个新文件夹 Hugo，然后在里面创建 bin 和 sites两个文件夹。bin 将用来放 Hugo 的可执行文件，sites 将用来放你的网站的源代码。</p>
<p>（2）前往<a href="https://github.com/spf13/hugo/releases" target="_blank">这里</a>，找到并下载 hugo_*_Windows-64bit.zip。解压，如果是一个 hugo_*_windows_amd64.exe 文件，将它改名为 hugo.exe。</p>
<p>（3）将这个 hugo.exe 文件移动到刚刚创建的 bin 文件夹里。</p>
<p>（4）配置环境变量。方法1:在 win10 搜索 cmd，右键<strong>以管理员身份打开</strong>命令提示符，将 <code>setx &quot;Path&quot; &quot;%PATH%;D:\Hugo\bin&quot; /m </code>复制粘贴上去，回车（输入命令后需回车执行，后文不再赘述）。 方法2：在 win10 搜索环境变量，进去找到系统变量中的 Path，-&gt;编辑-&gt;新建，然后将 <code>D:\Hugo\bin</code> 复制进去，确定。</p>
<p>（5）验证。重新打开命令提示符（关闭上一步骤使用的），输入执行 <code>hugo help</code>，如果你能看到 hugo 的帮助文档，就验证成功，否则检查上述步骤是否出错。</p>
<h3 id="开始">开始</h3>
<p>1.建立博客网站</p>
<p>（1）下载示例网站。打开命令提示符，执行 <code>D:</code> 切换 D 盘，然后执行 <code>cd D:\Hugo\sites</code> 进入 D:\Hugo\sites 目录（便捷方法：在文件资源管理器中进入相应目录，单击地址栏右边空白地方，在文本最左输入 <code>cmd </code> 加空格，回车），执行命令 <code>git clone https://gitee.com/lzxqaq/demosite.git</code> ，如最后出现 <code>** 100% ** 完成</code> 则成功。（此时可在文件资源管理器中查看下载的文件夹 <code>demosite</code>）</p>
<p>（2）预览。紧接上一步，在命令提示符中执行 <code>cd demosite</code> 进入 demosite 目录，先执行 <code>hugo</code> ，再执行 <code>hugo server</code>。打开浏览器，输入网址访问 localhost:1313。</p>
<p>2.将网站展示文件存放到 Github 远程仓库。</p>
<p>（1）在 Github 中创建一个名为 你的仓库名字.github.io 的仓库，在设置中检查 Github Pages。</p>
<p>（2）打开命令提示符，进入 demosite\public 目录，分别执行</p>
<pre><code>git init 
git add .
git commit -m &quot;first commit&quot;
git remote add origin https://github.com/你的Github名字/你的Github名字.github.io.git
git push --set-upstream origin master
</code></pre><p>输入账号名，密码，完成上传。</p>
<p>（3）测试。访问 github.com 网站，在你之前创建的仓库可以看到刚刚上传的文件。随后检查 Github Pages 设置，打开网址 <code>https://你的Github账户名.github.io</code> 访问你的网站，如果没有之前预览的网页，可以等待一会再刷新。</p>
<p>3.自定义域名（可选、需要一定的时间）</p>
<p>（1）购买域名。在华为云、阿里云等服务商购买域名。注意：国内购买域名需要实名认证。</p>
<p>（2）配置。访问 github.com 网站，进入你的仓库，在 setting 中找到 Github Pages，在 Custom domain 输入框中输入你的域名，保存。</p>
<p>（3）测试。访问你的域名。</p>


  
  <nav class="post-nav">
    <span class="nav-prev">&larr; <a href="/post/c&#43;&#43;codingguidelines/">【规约】 C&#43;&#43; 编程篇</a></span>
    <span class="nav-next"><a href="/post/2021-7-10/">vim 操作备忘</a> &rarr;</span>
  </nav>
  <script type="text/javascript">
  document.addEventListener('keyup', function(e) {
    if (e.target.nodeName.toUpperCase() != 'BODY') return;
    var url = false;
    if (e.which == 37) {  
      
      url = '\/post\/c\u002b\u002bcodingguidelines\/';
      
    } else if (e.which == 39) {  
      
      url = '\/post\/2021-7-10\/';
      
    }
    if (url) window.location = url;
  });
  </script>
  
  </article>
  </div>
  <footer>
  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/js/jquery.pjax.js"></script>
<script src="/js/pjax.config.js"></script>

<div class="music">
<div id="player" class="aplayer"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>  

<script type="text/javascript">
const ap = new APlayer({
    container: document.getElementById('player'),
    order: 'random',
    listFolded: true,
    listMaxHeight: 90,
    theme:	'#b7daff',
    audio: [
    {
        name: 'きこえるかしら',
        artist: '大和田りつこ',
        url: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/music/赤毛のアンOP_きこえるかしら_大和田りつこ.mp3',
        cover: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/image/赤毛のアンOP_きこえるかしら_大和田りつこ.jpeg'
      },
      {
        name: 'まっててごらん',
        artist: '大杉久美子',
        url: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/music/大杉久美子_ネリー・シュワルツ_まっててごらん.mp3',
        cover: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/image/大杉久美子_ネリー・シュワルツ_まっててごらん.png'
      },
      {
        name: 'ペリーヌ物語',
        artist: '片头曲和片尾曲',
        url: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/music/世界名作劇場_ペリーヌ物語_OP_ED.mp3',
        cover: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/image/世界名作劇場_ペリーヌ物語_OP_ED.jpg'
      },
      {
        name: 'ほほえみの魔法',
        artist: 'トラップ一家物語',
        url: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/music/Trapp_Family_Story_Hohoemi_no_mahou_ほほえみの魔法_Smil.mp3',
        cover: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/image/Trapp_Family_Story_Hohoemi_no_mahou_ほほえみの魔法_Smil.jpg'
      },
      {
        name: 'It is a Small world',
        artist: 'Disney Classics',
        url: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/music/Disney_Classics_It_s_a_Small_World_It_s_a_Small.mp3',
        cover: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/image/Disney_Classics_It_s_a_Small_World_It_s_a_Small.jpg'
      },
      {
        name: 'Forrest Gump Suite',
        artist: 'Alan Silvestri',
        url: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/music/Alan_Silvestri_Forrest_Gump_Suite2.mp3',
        cover: 'https://cdn.jsdelivr.net/gh/lzxqaq/jsdelivr@master/image/Alan_Silvestri_Forrest_Gump_Suite.jpeg'
      },





  ]
});
</script>




<script async src="/js/fix-toc.js"></script>

<script async src="/js/center-img.js"></script>

<script async src="/js/right-quote.js"></script>

<script async src="/js/no-highlight.js"></script>

<script async src="/js/fix-footnote.js"></script>

<script async src="/js/math-code.js"></script>

<script async src="/js/external-link.js"></script>

<script async src="/js/alt-title.js"></script>

<script async src="/js/header-link.js"></script>



<script async src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>


  



<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>



<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/r.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/tex.min.js"></script>
<script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>



  
  <hr>
  <div class="copyright">© <a href="/">Zexun Luo</a> 2020 - 2021</div>
  
  </footer>
  
  </body>
</html>

